/*
 * ՞˶･֊･˶՞ಣAuthor       : Charlie
 * ՞˶･֊･˶՞ಣDate         : 2024-11-30 00:29:37
 * ՞˶･֊･˶՞ಣLastEditors  : Charlie
 * ՞˶･֊･˶՞ಣLastEditTime : 2024-12-01 17:23:07
 * ՞˶･֊･˶՞ಣDescription  : 生成需要的格式
 */

//  例子：
// /**日间主题*/
// [data-theme='light'] .title {
//   color: #dda0dd;
// }
// /**夜间主题*/
// [data-theme='dark'] .title {
//   color: yellow;
// }

// 1.@each in 遍历
// 使用@each遍历生成需要的css样式
// 使用
// @each $animal in puma, sea-slug, egret, salamander {
//   .#{$animal}-icon {
//     background-image: url('/images/#{$animal}.png');
//   }
// }
// 结果
// .puma-icon {
//   background-image: url('/images/puma.png'); }
// .sea-slug-icon {
//   background-image: url('/images/sea-slug.png'); }
// .egret-icon {
//   background-image: url('/images/egret.png'); }
// .salamander-icon {
//   background-image: url('/images/salamander.png'); }


// 2.map-get() 获取值
// map-get($val, $key1, $key2) $key1与$key2是上下级关系


// 3. @mixin 混合属性， 对于重复的属性可以只定义一次， @include使用混合属性， @content向混合属性中插入样式，类似于vue中的slot
// @mixin sexy-border($color, $width) {
//   border: {
//     color: $color;
//     width: $width;
//     style: dashed;
//   }
// }
// p { @include sexy-border(blue, 1in); }

// @mixin apply-to-ie6-only {
//   * html {
//     @content;
//   }
// }
// @include apply-to-ie6-only {
//   #logo {
//     background-image: url(/logo.gif);
//   }
// }


@import "./theme.scss";

//主题遍历生成样式
@mixin theme-foreach {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;//变量通过!global提升为全局变量,供后续取值使用
    [data-theme="#{$theme-name}"] & {
       //插槽占位
      @content;
    }
  }
}
//获取主题属性值
@function theme-value($key) {
  @return map-get($theme-map, $key);
}

//设置字体颜色
@mixin font-color {
  @include theme-foreach {
    color: theme-value("font-color") !important;
  }
}

//设置边框颜色
@mixin border-color {
  @include theme-foreach {
    border-color: theme-value("border-color") !important;
  }
}

//设置背景颜色
@mixin background-color {
  @include theme-foreach {
    background-color: theme-value("background-color") !important;
  }
}

//设置登录页背景
@mixin loginBg {
  @include theme-foreach {
    background-image: theme-value("loginBg") !important;
  }
}

//设置字体颜色
@mixin normalFontColor {
  @include theme-foreach {
    color: theme-value("normalFontColor") !important;
  }
}
@mixin activeFontColor {
  @include theme-foreach {
    color: theme-value("activeFontColor") !important;
  }
}
@mixin activeBgColor {
  @include theme-foreach {
    background-color: theme-value("activeBgColor") !important;
  }
}

//设置侧边栏和导航栏颜色
@mixin borderBg {
  @include theme-foreach {
    background-color: theme-value("borderBg") !important;
  }
}

//设置mainBox背景颜色
@mixin mainBg {
  @include theme-foreach {
    background-color: theme-value("mainBg") !important;
  }
}

//设置边框颜色
@mixin color {
  @include theme-foreach {
    color: theme-value("color") !important;
  }
}

//设置按钮1样式
@mixin bottomOne {
  @include theme-foreach {
    color: theme-value("borderBg") !important;
    background-color: $white !important;
  }
}

//设置按钮1样式
@mixin bottomTwo {
  @include theme-foreach {
    color: theme-value("mainBg") !important;
    background-color: theme-value("borderBg") !important;
  }
}